<script>
import mySetting from '@/mixins/mySetting'
import { getList } from '@/api/assistance/pauseHistory'
export default {
  name: 'PauseHistory',
  mixins: [mySetting],
  data() {
    return {
      searchForm: {},
      tableData: []
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.searchForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    changePage(page) {
      this.listQuery = page
      this.initList()
    }
  },
  render() {
    const searchTags = [
      { label: this.$t('eqpId'), prop: 'eqpId', tag: 'DynInput' },
      { label: 'lot Id', prop: 'lotId', tag: 'DynInput' },
      { label: '原因', prop: 'reason', tag: 'DynInput' },
      { label: this.$t('systemTimePeriod'), prop: '', tag: 'Dyndaterange', event: (value) => {
        this.searchForm.startTime = Array.isArray(value) ? value[0] : null
        this.searchForm.endTime = Array.isArray(value) ? value[1] : null
      } }
    ]
    const tableColumns = [
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'eqpId', label: this.$t('eqpId') },
      { prop: 'lotId', label: 'Lot Id' },
      { prop: 'action', label: 'action' },
      { prop: 'reason', label: this.$t('Reason') },
      { prop: 'systemTime', label: this.$t('systemTime') },
      { prop: 'trackinStamp', label: this.$t('trackinStamp') }
    ]
    return (
      <div class='system-lock'>
        <el-row>
          <el-col span={24}>
            <dynForm info-form={this.searchForm} search-tags={searchTags}>
              <el-button
                type='primary'
                icon='el-icon-search'
                on-click={this.doSearch}
              >
                { this.$t('search') }</el-button>
            </dynForm>
          </el-col>
        </el-row>
        <el-card>
          <el-row>
            <dynTable
              ref='dynTable'
              loading={this.tableLoading}
              table-data={this.tableData}
              table-columns={tableColumns}
            />
          </el-row>
          <pagination
            total={this.total}
            page={this.listQuery.page} {...{ on: 'update:page' }}
            size={this.listQuery.size} {...{ on: 'update:size' }}
            vOn:pagination={this.changePage}
          />
        </el-card>
      </div>
    )
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
  // .el-form-item {
  //   margin-bottom: 15px;
  // }
}
</style>
